<template>
  <div style="border: 1px solid #ccc">
    <!-- 工具栏 -->
    <Toolbar
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        style="border-bottom: 1px solid #ccc"
        :mode="mode"
    />
    <!-- 编辑器 -->
    <Editor
        :defaultConfig="editorConfig"
        v-model="defaultHtml"
        @onChange="handleChange"
        style="height: 500px; overflow-y: hidden"
        :mode="mode"
        @onCreated="handleCreated"
    />
  </div>
</template>
 
<script setup>
import { onBeforeUnmount, shallowRef, reactive, toRefs,onMounted,ref,watch } from 'vue';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import { useUserStore } from '@/pinia/modules/user'


const props = defineProps({

  modelValue: {
    type: [String],
    default: ''
  }
});

const path = ref(import.meta.env.VITE_BASE_API)


const header = ref({
  'x-token': ''
})
const {token} = useUserStore()
header.value['x-token'] = token

onMounted(() => {

}) 

const emit = defineEmits(['update:modelValue']);
 
const editorRef = shallowRef();
 
const state = reactive({
  toolbarConfig: {},
  editorConfig: {
    placeholder: '请输入内容...',
    MENU_CONF: {
      uploadImage: {
        fieldName: 'file',
                    
                    headers: {
                        Accept: 'text/x-json' ,
                        Cookie: document.cookie,
                        'x-token': header.value['x-token'],
                    },

                    maxFileSize: 5 * 1024 * 1024, // 10M
                    base64LimitSize: 5 * 1024, 
                    server: "/api/fileUploadAndDownload/upload",
                    timeout: 5 * 1000, // 5s
                    customInsert(res, insertFn) {
                        insertFn(res.data.file.url);
                    },
                    onBeforeUpload(file) {
                        console.log('onBeforeUpload', file)

                        return file 
                    },
                    onProgress(progress) {
                        console.log('onProgress', progress)
                    },
                    onSuccess(file, res) {
                        console.log('onSuccess', file, res)
                    },
                    onFailed(file, res) {
                        alert(res.message)
                        console.log('onFailed', file, res)
                    },
                    onError(file, err, res) {
                        alert(err.message)
                        console.error('onError', file, err, res)
                    },
      }
    }
  },
  defaultHtml: props.modelValue,
  mode: 'default'
});
 
const { toolbarConfig, editorConfig, defaultHtml, mode } = toRefs(state);

watch(() => props.modelValue, (newVal) => {
    defaultHtml.value = newVal
}, { deep: true, immediate: true }
)
 
const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
 
function handleChange(editor) {
  emit('update:modelValue', editor.getHtml());
}
 
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});


</script>
 
<style src="@wangeditor/editor/dist/css/style.css"></style>